<template>
	<view class="putOutTie">
		<view class="head">
			<view class="operate">
				<view class="cancel" @tap="cancel()">
					取消
				</view>
				<view class="title">
					<view class="content">
						发布动态
					</view>
				</view>
				<view class="issue" @tap="issue()">
					发布
				</view>
			</view>
			<view class="topic" @tap.stop="findTopic" :class="{active: borderRadius,normal: !borderRadius}">
				<view class="selected" v-if="topics.length != 0">
					<text class="item" v-for="(item,index) in topics" :key="index">
						#{{item.topicName}}<text class="cuIcon-close close" @tap="closeTopic(index)"></text>
					</text>
				</view>
				<view class="blank" v-else>请选择话题</view>
			</view>
			<scroll-view class="selectTopic" v-if="borderRadius" @scrolltolower="scrolltolower" scroll-y="true">
				<text class="item" v-for="(item,index) in selectTopics.list" :key="index" @tap="selectTopic(index)">
					#{{item.topicName}}
				</text>
			</scroll-view>
		</view>
		<view class="main">
			<view class="text">
				<view class="textTitle">
					<view class="t_head">标题：</view>
					<input type="text" class="input" v-model="title" @blur="onBlur"/>
				</view>
				<view class="context">
					<textarea v-model="context" placeholder="内容" class="text-area" maxlength="-1" @blur="onBlur"/>
				</view>
			</view>
			<view class="images">
				<view class="addImg" v-for="(item,index) in imageArr" :key="index" @tap="viewImg(index)">
					<image class="image" :src="item" mode=""></image>
				</view>
				<view class="addImg" style="margin-right: 0;" @tap="upload()" v-if="imageArr.length < 3">
					<view class="plus">
						+
					</view>
					<view class="plust">
						添加图片
					</view>
				</view>
			</view>
			<view class="address" @tap="showAddress" :class="{active: isAddress,normal: !isAddress}">
				<view class="selected" v-if="build != null">
					<text class="item">
						#{{build.buildName}}
						<text class="cuIcon-close close" @tap="closeBuild(index)"></text>
					</text>
				</view>
				<view class="blank" v-else>请选择地点</view>
			</view>
			<scroll-view class="selectBuild" v-if="isAddress" scroll-y="true">
				<text class="item" v-for="(item,index) in selectBuilds.list" :key="index" @tap="selectBuild(index)">
					#{{item.buildName}}
				</text>
			</scroll-view>
			<view class="other">
				<view class="o_item">
					添加表情
				</view>
				<view class="o_item">
					添加表情
				</view>
				<view class="o_item" style="margin-right: 0;">
					提醒好友
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Scroll from '../../../components/common/Scroll.vue'
	export default {
		name: "PutOutTie",
		components: {
			Scroll
		},
		data() {
			return {
				token: "",
				base64: "",
				imageArr: [],
				topics:[],
				selectTopics: {num: 1,page: 0,list:[]},
				build: null,
				selectBuilds: {page: 0,list:[]},
				title: "",
				context: "",
				borderRadius: false,
				topicListNum: 0,
				isAddress: false,
				fileDate: 0,
				inviPic: ''
			}
		},
		onLoad() {
			this.getToken()
			this.getBuilds()
		},
		methods: {
			getToken() {
				uni.getStorage({
					key: "login",
					success:(e) => {
						this.token = e.data.token
						// console.log(this.token)
					}
				})
			},
			async getBuilds() {
				const res = await this.$myRequest({
					url: '/build/queryBuilds'
				})
				// console.log(res)
				this.selectBuilds.list.push(...res.data.data)
			},
			async getTopics() {
				const page = this.selectTopics.page + 1
				const res = await this.$myRequest({
					url: '/topic/selectTopicAll',
					data: {
						num: this.selectTopics.num,
						page: page,
						pageSize: 12
					}
				})
				// console.log(res)
				this.selectTopics.list.push(...res.data.data.list)
				this.selectTopics.page += 1
				this.topicListNum = res.data.data.pages
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},
			async issue() {
				console.log(this.inviPic)
				const res = await this.$myRequest({
					url: '/invitation/insert',
					token: this.token,
					method: 'POST',
					data: {
						buildId: this.build.buildId,
						fileDate: this.fileDate,
						inviContent: this.context,
						inviPic: this.inviPic,
						inviTitle: this.title,
						topicArray: JSON.stringify(this.topics)
					}
				})
				// console.log(res)
				if(res.data.status == 200) {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			upload() {
				uni.showActionSheet({
					itemList: ['拍照','从相册中选择'],
					success:(e) => {
						if(e.tapIndex==0){ //0是拍照
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success:(res) => {
									this.imageArr = res.tempFilePaths
									this.$forceUpdate()
									uni.getFileSystemManager().readFile({
										filePath: this.imageArr[0],//要读取的文件的路径 (本地路径)
										encoding: "base64",//指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
										success: (r) => {
											// console.log(r.data)
											this.base64 = 'data:image/jpeg;base64,' + r.data
											// console.log(this.base64)
										}
									})
									setTimeout(()=> {this.image()},1000)
								},
							})
						} else if(e.tapIndex==1){
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success:(res)=> {
									this.imageArr = res.tempFilePaths
									this.$forceUpdate()
									uni.getFileSystemManager().readFile({
										filePath: this.imageArr[0],//要读取的文件的路径 (本地路径)
										encoding: "base64",//指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
										success: (r) => {
											// console.log(r.data)
											this.base64 = 'data:image/jpeg;base64,' + r.data
											// console.log(this.base64)
										}
									})
									setTimeout(()=> {this.image()},1000)
								},
							})
						}
					}
				})
			},
			image() {
				uni.request({
					// url: "https://lqcheng.cn:8985/schoolnews/invitation/imgsbase64",
					url: "http://localhost:8985/schoolnews/invitation/imgsbase64",
					method: "POST",
					header:{
						"token" : this.token,
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data:{
						base64: this.base64
					},
					success:(e)=>{
						console.log(e)
						this.fileDate = e.data.data.fileDate
						this.inviPic = e.data.data.inviPic
					}
				})
			},
			viewImg(index) {
				uni.previewImage({
					current: index,
					urls: this.imageArr,
					indicator: "number",
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			onBlur() {
				if(this.borderRadius) {
					this.borderRadius = false
				}
				if(this.isAddress) {
					this.isAddress = false
				}
			},
			findTopic() {
				if(this.borderRadius) {
					this.borderRadius = false
				} else {
					this.getTopics()
					this.borderRadius = true
				}
				if(this.isAddress) {
					this.isAddress = false
				}
			},
			scrolltolower() {
				if(this.selectTopics.page < this.topicListNum) {
					this.getTopics()
				}
			},
			showAddress() {
				if(this.isAddress) {
					this.isAddress = false
				} else {
					this.isAddress = true
				}
				if(this.borderRadius) {
					this.borderRadius = false
				}
			},
			selectTopic(index) {
				if(this.topics.length < 3) {
					this.topics.push(this.selectTopics.list[index])
				}
			},
			closeTopic(index) {
				// console.log(111)
				this.topics.splice(index,1)
			},
			selectBuild(index) {
				this.build = this.selectBuilds.list[index]
				this.isAddress = false
			},
			closeBuild(index) {
				// console.log(111)
				this.builds.splice(index,1)
			}
		}
	}
</script>

<style>
	.head {
		width: 93%;
		margin: 18.18rpx auto;
		border-radius: 18.18rpx;
		background-color: #CFE4FF;
		padding: 18.18rpx 0;
		color: #FFFFFF;
	}
	
	.operate {
		display: flex;
		width: 93%;
		margin: 0 auto 9.09rpx;
		padding: 9.09rpx;
		height: 72.72rpx;
	}
	
	.cancel {
		flex: 1;
		background-color: #FF6262;
		text-align: center;
		line-height: 72.72rpx;
		border-radius: 18.18rpx;
	}
	
	.title {
		flex: 4;
	}
	
	.content {
		width: 50%;
		margin: 0 auto;
		background-color: #FFFFFF;
		text-align: center;
		line-height: 72.72rpx;
		border-radius: 18.18rpx;
		color: #000000;
	}
	
	.issue {
		flex: 1;
		background-color: #62A7FF;
		text-align: center;
		line-height: 72.72rpx;
		border-radius: 18.18rpx;
	}
	
	.topic {
		width: 95%;
		margin: 0 auto;
		height: 70rpx;
		background-color: #FFFFFF;
		padding: 9.09rpx 0;
	}
	
	.normal {
		border-radius: 18.18rpx;
	}
	
	.active {
		border-radius: 18.18rpx 18.18rpx 0 0;
	}
	
	.selected {
		width: 95%;
		margin: 0 auto;
	}
	
	.item {
		background-color: #62A7FF;
		border-radius: 18.18rpx;
		padding: 9.09rpx;
		display: inline-block;
		margin: 9.09rpx;
		line-height: 36.36rpx;
		color: #FFFFFF;
	}
	
	.close {
		padding-left: 9.09rpx;
	}
	
	.blank {
		color: #000000;
		text-align: center;
		width: 100%;
		line-height: 70rpx;
	}
	
	.selectTopic {
		height: 130.81rpx;
		width: 90%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 0 0 18.18rpx 18.18rpx;
		/* overflow: hidden; */
		padding: 18.18rpx;
	}
	
	.main {
		width: 88%;
		margin: 27.27rpx auto 0;
		background-color: #CFE4FF;
		padding: 18.18rpx;
		border-radius: 27.27rpx;
	}
	
	.text {
		border-radius: 18.18rpx;
		width: 100%;
		background-color: #FFFFFF;
	}
	
	.textTitle {
		padding: 27.27rpx;
		width: 454.54rpx;
		height: 72.72rpx;
		font-size: 45.45rpx;
		display: flex;
	}
	
	.input {
		/* outline: none; */
		border-bottom: 1px solid #8F8F94;
		flex: 2;
		height: 45.45rpx;
		padding-top: 18.18rpx;
	}
	
	.t_head {
		flex: 1;
		line-height: 72.72rpx;
	}
	
	.context {
		padding: 0 27.27rpx;
		width: 92%;
	}
	
	.text-area {
		width: 100%;
		height: 420rpx;
	}
	
	.images {
		margin: 18.18rpx auto;
		width: 100%;
		display: flex;
	}
	
	.addImg {
		background-color: #FFFFFF;
		width: 25%;
		height: 154.54rpx;
		border-radius: 27.27rpx;
		margin-right: 9.09rpx;
	}
	
	.addImg .image {
		width: 100%;
		height: 100%;
		border-radius: 27.27rpx;
	}
	
	.plus {
		font-size: 54.54rpx;
		font-weight: 700;
		padding: 18.18rpx 0 0;
	}
	
	.plus, .plust{
		text-align: center;
	}
	
	.address {
		width: 100%;
		margin: 0 auto;
		height: 70rpx;
		background-color: #FFFFFF;
		padding: 9.09rpx 0;
	}
	
	.selectBuild {
		height: 180.81rpx;
		width: 95%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 0 0 18.18rpx 18.18rpx;
		padding: 17rpx;
		color: #FFFFFF;
	}
	
	.other {
		display: flex;
		margin: 18.18rpx auto 0;
		width: 100%;
	}
	
	.o_item {
		flex: 1;
		background-color: #FFFFFF;
		margin-right: 10.9rpx;
		border-radius: 18.18rpx;
		text-align: center;
		padding: 18.18rpx 0;
	}

</style>
